import { Timeline, Button } from "antd"
import request from '../../api/request'
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
function Timer() {

    const [data, setData] = useState<any[]>([]);
    const [reverse, setReverse] = useState(false);
    const navigate = useNavigate();
    useEffect(() => {
        request.get("/article/list", {
            params: {
                page: 1,
                pageSize: 10,
            }
        }).then(res => {
            setData(res.data.rows)
        })
    }, [])
    const buildItems = (list: any[]) => {
        const items: any[] = []
        let lastYear = '';
        list.forEach((it) => {
            const year = it.createdAt.slice(0, 4);
            if (year !== lastYear) {
                lastYear = year;
                items.push({
                    color: 'red',
                    children: `@${year}...`
                })
            }
            items.push({
                color: 'blue',
                children: `${it.createdAt.slice(5, 10)} ${it.title}`,
                onClick: () => {
                    navigate(`/detail/${it.id}`)
                }
            })
        })
        return items;
    }
    return (
        <div>
            <Button onClick={() => setReverse(false)}>正序</Button>
            <Button onClick={() => setReverse(true)}>倒序</Button>

            <Timeline
                reverse={reverse}                    
                items={buildItems(data)}  
            />
        </div>
    )
}

export default Timer